import React, { PureComponent, Fragment, useState } from 'react';
import { Form, Select, Input, Checkbox } from 'antd';
import configData from './config-data.js';

const createInput = (list = [], disabled = false) => {
    return <Input disabled={disabled}></Input>
}
const createSelect = (list = [], disabled = false) => {
    return <Select placeholder={'请选择'} disabled={disabled}>
        {
            list.map((item) => (
                <Select.Option lable={item.name} key={item.value} value={item.value}>
                    {item.name}
                </Select.Option>
            ))
        }
    </Select>
}
const createCheckbox = (list = []) => {
    return <Checkbox.Group>
        {
            list.map((item) => {
                return <Checkbox value={item.value} key={item.value}>{item.name}</Checkbox>
            })
        }
    </Checkbox.Group>
}
const getContext = (selector) => {
    const config = {
        input: createInput,
        select: createSelect,
        checkbox: createCheckbox
    }
    return config[selector];
}
class HandleCreate {
    context = null
    constructor(selector) {
        this.context = getContext(selector);
    }
    createNode(buildParams) {
        let list = buildParams.optionList && buildParams.optionList.list;
        if (buildParams.nameFiled || buildParams.valueFiled) {
            if (buildParams.nameFiled && buildParams.valueFiled) {
                console.log('nameFiled和valueFiled必须配对使用');
            }
            list = list.map((item) => {
                return {
                    name: item[buildParams.nameFiled],
                    value: item[buildParams.valueFiled]
                }
            })
        }
        return this.context(list, buildParams.disabled);
    }
}
// 缓存实例化
class CreateFactory {
    examples = {};
    getExample(selector) {
        let oExample = this.examples[selector];
        if (oExample === undefined) {
            oExample = this.examples[selector] = new HandleCreate(selector)
        }
        return oExample;
    }
}
const formItemLayout = {
    labelCol: {
        xs: { span: 6 },
        sm: { span: 6 },
    },
    wrapperCol: {
        xs: { span: 16 },
        sm: { span: 16 },
    },
    labelAlign: 'left',
};
@Form.create({})
class FormModal extends PureComponent {
    constructor(props) {
        super(props)
    }
    render() {
        const { defaultData, form } = this.props;
        const { getFieldDecorator } = form;
        const createFactory = new CreateFactory();
        return <Form size="small">
            {
                defaultData.map((item) => {
                    return <Form.Item label={item.label} {...formItemLayout} key={item.name} hidden={item.hidden}>
                        {getFieldDecorator(`${item.name}`, {
                            initialValue: typeof item.initialValue === 'number' ? String(item.initialValue) : item.initialValue,
                            // rules: [{ required: true, message: `${item.label}不能为空` }],
                        })(
                            createFactory.getExample(item.type).createNode(item)
                        )}
                    </Form.Item>
                })
            }

        </Form >
    }
}

export default FormModal;